<template>
  <div class="content-container">
    <h2 style="padding-left:30px">
      <router-link :to="'/group/userPortrait?id=' +userInfoData.distinct_id" class="linkId">
        <span style="display:inline-block;float: right;font-size:14px;color: #559ff0;">查看单用户全景视图 ></span>
      </router-link>
    </h2>
    <el-row :gutter="10">
      <el-col :span="18" class="content-right">
        <el-row class="tab-content" style="padding-top:10px">
          <el-col :span="8">
            <el-date-picker
              v-model="queryParams.dateRange"
              size="small"
              style="width: 240px"
              value-format="yyyy-MM-dd"
              type="daterange"
              range-separator="-"
              :picker-options="pickerOptions"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-col>
<!--          <el-col :span="2" style="padding-top:10px;">-->
<!--            <el-checkbox v-model="queryParams.checked">支持虚拟事件</el-checkbox>-->
<!--          </el-col>-->
<!--          <el-col :span="8" style="float: right">-->
<!--            事件筛选-->
<!--            <el-select v-model="queryParams.region" placeholder="请选择活动区域">-->
<!--              <el-option label="区域一" value="shanghai"></el-option>-->
<!--              <el-option label="区域二" value="beijing"></el-option>-->
<!--            </el-select>-->
<!--          </el-col>-->
        </el-row>

        <el-row class="tab-content">
          <user-bar-chart :chart-data="chartData" :chart-title="chartTitle" :style="{width:'100%',height:'500px'}"/>
        </el-row>
        <el-row class="tab-content">
          <el-col :span="8">
            <el-checkbox-group v-model="queryType">
              <el-checkbox-button label="sequence"  @change="butonChangeFun(1)"><i class="el-icon-s-operation" ></i>行为序列
              </el-checkbox-button>
              <el-checkbox-button label="analysis"  @change="butonChangeFun(2)"><i class="el-icon-s-grid"></i>行为统计
              </el-checkbox-button>
            </el-checkbox-group>
          </el-col>
        </el-row>
        <el-row v-show="queryTypeValue==='analysis'" style="height:500px;width:100%" class="tab-content">
          <RingChart v-if="queryTypeValue==='analysis'"  :chartData="pieCharData" :style="{width:'100%',height:'500px'}"/>
        </el-row>
        <el-tabs v-model="activeName" class="tab-content" v-show="queryTypeValue==='sequence'">
          <el-tab-pane label="按小时加载" name="attr">
            <el-row>
              <div class="block" style="margin-top:20px">
                <el-timeline>
                  <el-timeline-item timestamp="2018/4/12" placement="top">
                    <el-card class="ant-tabs">
                      <div @click="timeCardChangeFun">
                        <el-row>
                          <el-col :span="2">
                            <h4>16:39:27</h4>
                          </el-col>
                          <el-col :span="22">
                            <h4>更新 Github 模板</h4>
                            <el-divider></el-divider>
                            <div class="attr-content" style="width:100%">
                              <div class="user-attr-cls" style="width:30%;float:left">
                                <label>首次广告系列来源</label><br><span>{{
                                  userInfoData.utm_source ? userInfoData.utm_source : '「未知」'
                                }}</span>
                              </div>
                              <div class="user-attr-cls" style="width:30%;float:left">
                                <label>首次广44444告系列来源</label><br><span>{{
                                  userInfoData.utm_source ? userInfoData.utm_source : '「未知」'
                                }}</span>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2018/4/3" placement="top">
                    <el-card class="ant-tabs">
                      <h4>更新 Github 模板</h4>
                      <p>王小虎 提交于 2018/4/3 20:46</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2018/4/2" placement="top">
                    <el-card class="ant-tabs">
                      <h4>更新 Github 模板</h4>
                      <p>王小虎 提交于 2018/4/2 20:46</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-row>
          </el-tab-pane>
          <el-tab-pane label="按明细加载" name="event">
            <el-row>
              <div class="block" style="margin-top:20px">
                <el-timeline>
                  <el-timeline-item timestamp="2028/4/12" placement="top">
                    <el-card class="ant-tabs">
                      <div @click="timeCardChangeFun">
                        <el-row>
                          <el-col :span="2">
                            <h4>16:39:27</h4>
                          </el-col>
                          <el-col :span="22">
                            <h4>更新 Github 模板</h4>
                            <el-divider></el-divider>
                            <div class="attr-content" style="width:100%">
                              <div class="user-attr-cls" style="width:30%;float:left">
                                <label>首次广告系列来源</label><br><span>{{
                                  userInfoData.utm_source ? userInfoData.utm_source : '「未知」'
                                }}</span>
                              </div>
                              <div class="user-attr-cls" style="width:30%;float:left">
                                <label>首次广44444告系列来源</label><br><span>{{
                                  userInfoData.utm_source ? userInfoData.utm_source : '「未知」'
                                }}</span>
                              </div>
                            </div>
                          </el-col>
                        </el-row>
                      </div>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2018/4/3" placement="top">
                    <el-card class="ant-tabs">
                      <h4>更新 Github 模板</h4>
                      <p>王小虎 提交于 2018/4/3 20:46</p>
                    </el-card>
                  </el-timeline-item>
                  <el-timeline-item timestamp="2018/4/2" placement="top">
                    <el-card class="ant-tabs">
                      <h4>更新 Github 模板</h4>
                      <p>王小虎 提交于 2018/4/2 20:46</p>
                    </el-card>
                  </el-timeline-item>
                </el-timeline>
              </div>
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="6" class="content-left">
        <div style="margin-left:20px">
          <img src="../../../assets/images/head.svg" alt=""/>
        </div>
        <div style="line-height:50px;">
          <img src="../../../assets/images/prevattr.svg" align="Middle" alt=""
               style="margin-top:-10px;"/>&nbsp;&nbsp;<span>预设用户属性</span>
        </div>
        <div>
          <div class="index__profile-item___2Ep7n">
            <div class="index__profile-item-box___3v5O7">
              <label>登录ID</label><span>{{ userInfoData.login_id }}</span>
            </div>
            <div class="index__profile-item-box___3v5O7"><label>设备ID</label><span>{{ userInfoData.distinct_id }}</span>
            </div>
            <div class="index__profile-item-box___3v5O7"><label>城市</label><span>{{ userInfoData.city }}</span></div>
            <div class="index__profile-item-box___3v5O7"><label>用户名</label><span>{{ userInfoData.name }}</span></div>
            <div class="index__profile-item-box___3v5O7"><label>注册时间</label><span>{{
                userInfoData.register_time
              }}</span></div>
            <div class="index__profile-item-box___3v5O7"><label>用户更新时间</label><span>{{
                userInfoData.update_time
              }}</span></div>
            <div class="index__profile-item-box___3v5O7"><label>省份</label><span>{{ userInfoData.province }}</span></div>

            <!--            first_browser_language-->
          </div>
        </div>
      </el-col>
    </el-row>

    <el-drawer
      :title="drawerTitle"
      :visible.sync="drawer"
      direction="rtl"
      size="40%"
      :show-close="true"
      :before-close="handleClose"
      :with-header="true">
      <el-divider></el-divider>
      <div class="tab-content">
        <div class="attr-content">
          <div class="user-attr-cls"><label>首次访问时间</label><br><span>{{
              userInfoData.first_visit_time ? userInfoData.first_visit_time : '「未知」'
            }}</span></div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls">
            <label>首次广告系列来源</label><br><span>{{ userInfoData.utm_source ? userInfoData.utm_source : '「未知」' }}</span>
          </div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls">
            <label>首次广告系列媒介</label><br><span>{{ userInfoData.utm_medium ? userInfoData.utm_medium : '「未知」' }}</span>
          </div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls"><label>iOS渠道追踪匹配模式</label><br><span>{{
              userInfoData.utm_matching_type ? userInfoData.utm_matching_type : '「未知」'
            }}</span></div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls">
            <label>首次广告系列内容</label><br><span>{{ userInfoData.utm_content ? userInfoData.utm_content : '「未知」' }}</span>
          </div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls">
            <label>首次广告系列名称</label><br><span>{{ userInfoData.utm_campaign ? userInfoData.utm_campaign : '「未知」' }}</span>
          </div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls">
            <label>首次广告系列字词</label><br><span>{{ userInfoData.utm_term ? userInfoData.utm_term : '「未知」' }}</span></div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls"><label>首次前向地址</label><br><span>{{
              userInfoData.first_referrer ? userInfoData.first_referrer : '「未知」'
            }}</span></div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls"><label>首次前向域名</label><br><span>{{
              userInfoData.first_referrer_host ? userInfoData.first_referrer_host : '「未知」'
            }}</span></div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls"><label>首次搜索引擎关键词</label><br><span>{{
              userInfoData.first_search_keyword ? userInfoData.first_search_keyword : '「未知」'
            }}</span></div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls"><label>首次流量来源类型</label><br><span>{{
              userInfoData.first_traffic_source_type ? userInfoData.first_traffic_source_type : '「未知」'
            }}</span></div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls">
            <label>首次浏览器字符类型</label><br><span>{{
              userInfoData.first_browser_charset ? userInfoData.first_browser_charset : '「未知」'
            }}</span>
          </div>
        </div>
        <div class="attr-content">
          <div class="user-attr-cls">
            <label>首次使用的浏览器语言</label><br><span>{{
              userInfoData.first_browser_language ? userInfoData.first_browser_language : '「未知」'
            }}</span>
          </div>
        </div>
      </div>
    </el-drawer>

  </div>


</template>

<script>
import {getUserInfo} from "@/api/base/group";
import {getUserinfotagsByType} from "@/api/tags/tag";
import UserBarChart from './comments/UserBarChart.vue';
import RingChart from './comments/ringChart.vue'
import resize from './comments/mixins/resize'
export default {
  mixins: [resize],
  name: "userSequence",
  components: {
    UserBarChart,RingChart
  },
  data() {

    return {
      // 遮罩层
      chartTitle: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
      chartData:{
        name: 'Budget 2012',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130]
      },
      loading: true,
      drawer: false,
      title: '↑按时间正序',
      activeName: 'attr',
      drawerTitle: '属性',
      queryType: ['sequence'],
      queryTypeValue:'sequence',
      queryParams: {
        dateRange: [],
        checked:null
      },
      otherData: {
        allTagCount: ""
      },
      userInfoData: {},
      tagsData: [],
      data: [],
      pieCharData:[
        { value: 1048, name: 'Search Engine' },
        { value: 735, name: 'Direct' },
        { value: 580, name: 'Email' },
        { value: 484, name: 'Union Ads' },
        { value: 300, name: 'Video Ads' }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      pickerOptions: {
        shortcuts: [{
          text: '今日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '昨日',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '本周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            const day = start.getDay() || 7;
            var newStart = new Date(start.getFullYear(), start.getMonth(), start.getDate() + 1 - day);
            picker.$emit('pick', [newStart, end]);
          }
        }, {
          text: '上周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },

    };
  },
  created() {
    const deviceId = this.$route.query && this.$route.query.id;
    this.getUserInfo(deviceId);
    //this.getTagParent(deviceId);
  },
  methods: {
    getUserInfo(id) {
      getUserInfo(id).then(response => {
        this.userInfoData ={};// response.data;
      });
    },
    getTagParent(id) {
      getUserinfotagsByType(id).then(response => {
        console.log("response.data=" + response.data);
        console.log("response.data.mapList=" + response.data.mapList);
        this.data = response.data.mapList;
        console.log("this.data=" + this.data);
        this.otherData.allTagCount = response.data.allTagCount;
      });
      // getTagParentSelect().then(response => {
      //   this.tagsData = response.data;
      //   this.data = response.data.children;
      // });
    },
    handleNodeClick(data) {
      console.log(data);
      let id = data.id;
      console.log(id);
      // getUserinfotagsByType(id).then(response => {
      //   this.data = response.data.mapList;
      // });

    },
    changeTitleFun() {
      this.title = '按时间倒序↓';
    },

    timeCardChangeFun() {
      this.drawer = true;
    },
    handleClose(done) {
      this.drawer = false;
    },
    butonChangeFun(type){
      if(type===1){
        this.queryType= ['sequence'];
        this.queryTypeValue='sequence';
      }else{
        this.queryType= ['analysis'];
        this.queryTypeValue='analysis';
      }
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">
.content-container {
  width: 100%;
  overflow-y: auto;
  min-width: 1280px;
  padding: 0 40px;
  background: #f7f9fa;
  display: flex;
  flex-direction: column;

  .content-left {
    padding: 20px 14px 12px;
    background-color: #fff;
  }

  .content-right {
    //background-color: #fff;
  }
}

.index__profile-item___2Ep7n {
  margin-top: 20px;
  border-bottom: 1px solid #d3dce6;
  padding-top: 6px;
  padding-left: 10px;

  .index__profile-item-box___3v5O7 {
    margin-bottom: 26px;
  }

  .index__profile-item-box___3v5O7 > label {
    display: block;
    font-size: 12px;
    color: #8492a6;
    line-height: 17px;
    margin-bottom: 5px;
  }

  .index__profile-item-box___3v5O7 > span {
    font-weight: 500;
    color: #475669;
    line-height: 20px;
    font-size: 14px;
    display: inline-block;
    word-break: break-all;
  }
}

.index__content___3xrWj {
  flex: 1;
  margin-left: 18px;
  overflow-y: hidden;
  margin-bottom: 40px;

  .index__model_tags___1-PXC {
    border-color: #1890ff;
    background-color: #fff;
    margin-bottom: 18px;
    padding: 20px 20px 5px;
    overflow: hidden;

    .index__tags___24Vkg {
      display: flex;
      float: left;
      flex-wrap: wrap;

      .index__tag___3Ug-V {
        padding: 6px 25px;
        border-radius: 16px;
        background-color: #eff2f7;
        margin-bottom: 20px;
        margin-right: 10px;
        display: flex;
        align-items: center;
        overflow: hidden;
        white-space: nowrap;
        cursor: pointer;
        color: #475669;
      }

      .index__tag___3Ug-V > span:first-child {
        margin-right: 4px;
        text-overflow: ellipsis;
        overflow: hidden;
        display: inline-block;
        white-space: nowrap;
      }

      .index__tag___3Ug-V > span:nth-child(2) {
        margin-right: 10px;
      }

      .index__tag___3Ug-V:hover {
        background-color: #99a9bf;
      }
    }
  }

  .index__all_tags___3HoCH {
    background-color: #fff;
    padding: 20px 20px 5px;
    overflow: hidden;
  }
}

.labelTit {
  .el-input__inner {
    padding: 0;
    border: 0;
    width: 90px;
    font-weight: bold;
  }

  .el-input__suffix {
    right: 0;
    background-color: #fff;
    display: flex;
  }
}

.index__title___3e4ql {
  color: #1f2d3d;
  font-size: 16px;
  font-weight: 500;
  line-height: 22px;
  margin-bottom: 8px;
}

.index__desc___D3hEk {
  font-size: 14px;
  font-weight: 400;
  color: #8492a6;
  line-height: 20px;
}

.el-tree-node__label {
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  color: #475669;
  height: 30px;
  padding: 0 10px;
  border-radius: 16px;
}

.tab-content {
  padding: 0 24px 12px;
  width: 100%;
  height: 100%;
  border-radius: 3px;
  background-color: #fff;
  overflow: hidden;

}

.attr-content {
  width: 30%;
  float: left;
  margin-right: 22px;

  font-size: 14px;
  height: 58px;
  border-radius: 3px;
  padding: 8px 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: default;
}

.attr-content .user-attr-cls {
  color: #475669;
  line-height: 25px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 2px;
  width: 100%;
}

.ant-tabs {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  color: #475669;
  font-size: 14px;
  font-variant: tabular-nums;
  line-height: 1.5;
  list-style: none;
  font-feature-settings: "tnum";
  position: relative;
  overflow: hidden;
  zoom: 1;
}

.ant-tabs:hover {
  border: 1px #00BF8A solid;
  background-color: #eaf9f5;
  cursor: pointer;
}

.el-divider--horizontal {
  display: block;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
</style>
